<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="margin-top: 20px">
    </div>

    <!--分销员列表-->
    <cy-table
      @findPage="findPage"
      :operationWidth="300"
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      :showBatchDelete="false"
      :showDeleteOperation="false"
      :showSelection="false"
      :showDetailOperation="false"
      :showEditOperation="false"
      :showCustomOperation="false"
      :showOperation="false"
      ref="CyTable"
    ></cy-table>

  </div>
</template>

<script>
  import KtButton from '@/views/Core/KtButton'
  import CyTable from '@/views/Core/JicTable'
  import Qriously from 'v-qriously'
  import {validatePhone} from '@/utils/validate'

  export default {
    components: {
      KtButton,
      CyTable,
      Qriously,
    },

    data() {
      return {
        size: 'mini',
        filters: {
          buyerId:this.$route.query.buyerId,
        },
        options: [],
        editDialogVisible: false,
        shareDialogVisible: false,
        columns: [
          {
            prop: 'userAccount', label: '用户账号', minWidth: 100,
            formatter: function (row, column, prop) {
              if (prop == '') return '-'
              else return prop
            }
          },
          {
            prop: 'nickName', label: '用户昵称', minWidth: 100,
            formatter: function (row, column, prop) {
              if (prop == '') return '-'
              else return prop
            }
          },
          {prop: 'phone', label: '手机号码', minWidth: 100},
          {prop: 'actualPayTotalAmount', label: '实付总金额', minWidth: 80},
          {prop: 'createTime', label: '注册时间', minWidth: 120}
        ],
        filterColumns: [],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},
        dataFormRules: {
          phone: [{required: true, validator: validatePhone, trigger: ['blur', 'change']}],
        },
      }
    },

    methods: {
      // 获取分页数据
      findPage: function (data) {
        let this_ = this
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {}
        }
        this_.filters.start = this.pageRequest.pageNum
        this_.filters.limit = this.pageRequest.pageSize
        this.utils.request.queryOrderDistributionInfoList(this_.filters, function (res) {
          if (res.data.rows.length === 0) {
            res.data.rows = []
            this_.$message({message: '查询暂无数据', type: 'warning'})
          }
          this_.$refs.CyTable.findPage({content: res.data.rows, total: res.data.total})
        })
      },


      // 重置
      resetForm(formName) {
        let flag = this.filters.phone === '' && this.filters.userAccount === '' && this.filters.nickName === ''

        if (flag) {
          this.$message({message: '请输入查询条件', type: 'warning'})
          return
        }

        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields()
          this.findPage(null)
        }
      },

      // 关闭
      handleClose() {
        this.editDialogVisible = false
        this.options = []
        this.$refs.dataForm.resetFields()
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns
        this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      },
      // 处理表格列过滤显示
      initColumns: function () {
        var temp = []

        $.each(this.columns, function (key, val) {
          temp.push(val)
        })
        this.filterColumns = temp
      }
    },

    mounted() {
      this.initColumns()
    }
  }
</script>

<style scoped lang='scss'>
  .btn-left {
    margin-left: 45px;
  }
</style>
